<template>
    <div class="box">
        <div class="centerfatherbox">
            <!-- 头像 -->
            <div class="header">
                <div class="photos">
                    <img src="../assets/OIP-C (1).jpg" alt="">
                </div>
            </div>
            <!-- 表单 -->
            <div class="formbox">
                <!-- 作用域插槽 -->
                <personal>
                    <template scope="Data">
                        <form action="" v-for="item in Data.Administrator" :key="item.name">
                            <div class="formone">
                                <div class="formsonone">
                                    <label>姓名:</label>
                                    <span>&nbsp;&nbsp;{{ item.name }}</span>
                                    <br>
                                    <label>职务:</label>
                                    <span>&nbsp;&nbsp;{{ item.post }}</span>
                                    <br>
                                    <label>球队:</label>
                                    <span>&nbsp;&nbsp;{{ item.department }}</span>
                                    <br>
                                    <label>职业:</label>
                                    <span>&nbsp;&nbsp;{{ item.position }}</span>
                                </div>
                                <div class="formsontwo">
                                    <label>性别:</label>
                                    &nbsp;&nbsp;
                                    <input type="radio" class="input1" name="sex" value="男" v-model="item.sex">
                                    <span>男</span>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio" class="input1" name="sex" value="女" v-model="item.sex">
                                    <span>女</span>
                                    <br>
                                    <label for="">手机:</label>
                                    &nbsp;&nbsp;
                                    <input type="text" class="input2" v-model="item.phone">
                                    <br>
                                    <label for="">密码:</label>
                                    &nbsp;&nbsp;
                                    <input type="password" class="input2" v-model="item.password">
                                    <br>
                                    <label>邮箱:</label>
                                    &nbsp;&nbsp;
                                    <input type="text" class="input2" v-model="item.mailbox">
                                </div>
                            </div>
                            <div class="formtwo">
                                <span>留言:</span>
                                <div class="formtwo_1">
                                    <p>Talento não vale nada se não houver esforço. Os sonhos não são o que você vê enquanto
                                        dorme, são o que o impede de dormir.Nunca tenha medo de manter sua fé, mesmo que
                                        você
                                        esteja sozinho! Nunca subestime seus adversários. Pode ser o maior erro de sua vida.
                                        Não lhes digas, mostra-lhes! James harden vai buscar o maldito campeão da
                                        NBA!------Enviado por: cristiano ronaldo</p>
                                </div>

                                <!-- &nbsp;&nbsp;
                                <textarea name="" id="" cols="87" rows="5" v-model="item.remark"></textarea> -->
                            </div>
                        </form>
                    </template>
                </personal>
            </div>
        </div>
    </div>
</template>
<script>
import personal from '../router/personal.vue'
export default {
    data() {
        return {
            value: null,
            iconClasses: ['el-icon-sunny', 'el-icon-sunny', 'el-icon-sunny']
        }
    },
    //计算属性
    computed: {
    },
    //监听
    watch: {

    },
    //方法
    methods: {
    },
    //组件
    components: {
        personal,
    },
    // 生命周期
    mounted() {

    },
    created() {
    },
}
</script>

<style lang="less" scoped>
.formsonone>label:nth-child(1) {
    margin-left: -113px;
}

.formsonone>label:nth-child(4) {
    margin-left: -83px;
}

.formsonone>label:nth-child(7) {
    margin-left: -93px;
}

.formsonone>label:nth-child(10) {
    margin-left: -13px;
}

.formsontwo>label:nth-child(1) {
    margin-left: -38px;
}

.formtwo_1 {
    margin-left: 140px;
    margin-top: 10px;
    width: calc(100vw - 720px);
    height: calc(100vh - 470px);
    color: #ff416c;
    background-color: #60626610;
    // outline: 1px solid red;
}

.box {
    margin: 30px auto;
    width: calc(100vw - 340px);
    height: calc(100vh - 60px);
    display: flex;
    justify-content: center;
    // outline: 1px solid red;

    .centerfatherbox {
        background-color: #FFFFFF;
        outline: 1px solid #EBEEF5;
        margin: 20px auto;
        // outline: 1px solid black;
        width: calc(100vw - 340px);
        height: calc(100vh - 60px);

        .formbox {
            // background-color: aliceblue;
            margin: auto;
            // outline: 1px solid black;
            width: calc(100vw - 450px);
            height: calc(100vh - 260px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .formone {
                width: calc(100vw - 450px);
                height: calc(100vh - 260px);
                display: flex;
                justify-content: space-around;

                // outline: 1px solid black;
                .formsonone,
                .formsontwo {
                    width: 20vw;
                    height: 30vh;
                    // outline: 1px solid red;
                }

                label {
                    line-height: 45px;
                    font-size: 18px;
                    font-weight: 500;
                    color: rgb(80, 120, 228);
                    // outline: 1px solid red;

                }

                span {
                    color: #606266;
                    // outline: 1px solid red;

                }

                .input2 {
                    width: 150px;
                    height: 25px;
                    border: 1px solid #c5c8ce;
                    border-radius: 5px;
                }

                .input1 {
                    margin-left: 5px;
                }
            }

            .formtwo {
                margin: 10px auto;
                text-align: center;
                margin-top: -160px;

                span {
                    margin-left: -580px;
                    font-size: 18px;
                    color: rgb(80, 120, 228);
                }

            }
        }

        .header {
            margin: 20px auto;
            width: 400px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                margin-left: 10px;
                font-weight: 600;
                text-decoration: underline;
                // 鼠标移入变小手
                cursor: pointer;
                color: rgb(80, 120, 228);
            }

            p {
                margin-left: 10px;
                font-size: 5px;
                color: #999;
            }
        }
    }

    .photos {
        cursor: pointer;
        border-radius: 50%;
        width: 150px;
        height: 150px;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>